<template>
	<!-- 多种情况未判断，比如未支付等 -->
	<!-- 获取的积分，下单的订单详情 -->
	<view class="container">
		<up-navbar title="" :autoBack="true" :placeholder='true'> </up-navbar>
		<!-- 门店 -->
		<view class="order-bewtten">
			<view class="dh-value">
				订单号：{{code}}
			</view>
			<view class="status-zq">
				已完成
			</view>
		</view>
		<view class="address">{{carName}}</view>

		<!-- 商品 -->
		<view class="product-continar">
			<view class="pro-item" style="display: flex;" v-for="(item,index) in orderDeatilList" :key="index">
				<image v-if="item.image" class="logo" :src="item.image"> </image>
				<image v-else class="logo"
					src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/other/icon-default.png"> </image>
				<view class="rg-content">
					<view style="display: flex;">
						<view class="po-title">
							{{item.goodsName}}
						</view>
					</view>
					<view class="pro-info">
						{{item.exchangeScore || 0}}积分 + {{item.exchangeMoney || 0}}元
						<!-- 金额暂不要 exchangeMoney -->
					</view>
					<view class="pro-count-bewtten">
						<view class="" style="display: flex;">
							<view class="pro-no-price">
								{{ orderPayModal.orderTime}}
								<!-- payTime -->
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="zk-center-flex" @click="toggleList">
				<view class="zk-title">
					{{toggleButtonText}}
				</view>
				<image class="zk-icon" src="https://oss.jtmckj.com/wmp/jfsc/pay/bt-arro.png" mode=""></image>
			</view> -->

		</view>


		<!-- 订单 -->
		<view class="xd-continar">
			<view class="xd-conti-pd">
				<view class="xd-bewtten">
					<view class="label">
						下单时间
					</view>
					<view class="value">
						{{orderPayModal.orderTime}}
					</view>
				</view>
				<view class="xd-bewtten">
					<view class="label">
						订单金额
					</view>
					<view class="value" v-if="orderPayModal?.payList?.length > 0 && orgCode == '0021'"> 
						<view v-for="(item,index) in orderPayModal.payList" :key="index">
							<!--1积分 2会员卡余额 3 微信支付 -->
							<text v-if="item.payType == 3">{{item.payAmt || 0}}元</text>
						</view>
					</view>
					<!--1积分 2会员卡余额 3 微信支付 --> 
					<view class="value" v-if="orderPayModal?.payList?.length > 0 && orgCode !== '0021'">
						<view v-for="(item,index) in orderPayModal.payList" :key="index"> 
						    <!-- 当前单选支付，只会存在一种情况 -->
							<text v-if="item.payType == 1 && item.payAmt > 0">{{item.payAmt || 0}}积分</text>
							<text v-if="item.payType == 3 && item.payAmt > 0">{{item.payAmt || 0}}元</text>
						</view>
					</view> 
				</view>
				<!-- <view class="xd-bewtten">
					<view class="label">
						优惠金额
					</view>
					<view class="value" style="color:#FF3333 ;">
						20.00
					</view>
				</view> -->
				<view class="xd-bewtten">
					<view class="label">
						支付时间
					</view>
					<view class="value">
						{{orderPayModal.payTime}}
					</view>
				</view>
				<view class="xd-bewtten">
					<view class="label">
						支付方式
					</view>
					<view class="value">
						<text v-if="orgCode == '0021'">微信</text>
						<text v-else-if="orderPayModal?.payList?.[0]?.payType == 1"> 
							会员卡积分
						</text>
						<text v-else-if="orderPayModal?.payList?.[0]?.payType == 3"> 
							微信
						</text>
						<!-- 微信/会员卡 -->
						<!-- 会员卡积分 -->
					</view>
				</view>

			</view>
			<view class="bot-price-infobox" v-if="orgCode == '0021'">
				<view>支付金额：</view>
				<view v-if="orderPayModal?.payList?.length > 0">
					<!-- {{orderPayModal?.payList[0]?.payAmt}}元 -->
					<view v-for="(item,index) in orderPayModal?.payList" :key="index">
						<!--1积分 2会员卡余额 3 微信支付 -->
						<text v-if="item.payType == 3">{{item.payAmt || 0}}元</text> 
					</view>  
				</view>
			</view>
			<view class="bot-price-infobox" v-else>
				<view>消耗：</view>
				<view v-if="orderPayModal?.payList?.length > 0">  
					<view v-for="(item,index) in orderPayModal?.payList" :key="index">
						<!--1积分 2会员卡余额 3 微信支付 -->
						<text v-if="item.payType == 1 && item.payAmt > 0">{{ item.payAmt}}积分</text> 
						<text v-if="item.payType == 3 && item.payAmt > 0">{{item.payAmt}}元</text> 
					</view>  
				</view>
			</view>
		</view> 

	</view>
</template>

<script setup>
	import { goodsPublic } from '@/pagesPointShop/api/goods.js';
	import { onLoad, onUnload, onReachBottom, onPullDownRefresh, onShow, onHide, onPageScroll } from '@dcloudio/uni-app';
	import { ref, reactive } from 'vue';
	
	// shopInfo下必有： brandCode: "0003"   orgCode : "0015"
	const orgCode = uni.getStorageSync('shopInfo').orgCode

	const carName = ref('')
	const code = ref('')
	const orderDeatilList = ref([])
	const orderPayModal = ref({})

	onLoad((options) => {
		code.value = options.code
		// carName.value = uni.getStorageSync('pointUserInfo').carName  // 后端接口返回的数据有问题，等后端调整
		carName.value = uni.getStorageSync('shopInfo').orgName || uni.getStorageSync('pointUserInfo').carName
		initData()
	});

	onShow(() => {

	});

	// 获取订单商品详情信息
	const initData = () => {
		let modal = {
			"functionName": "getMemberMallOrderDetail",
			"contentData": {
				"code": code.value
			}
		}
		goodsPublic(modal).then(res => {
			console.log('orderDetail', res)
			if (res.opFlag !== '1') {
				return
			}
			orderDeatilList.value = res.content.rowData.orderDeatil
			orderPayModal.value = res.content.rowData.orderPay

		})
	}

	const list = ref([{
			title: '套餐一'
		},
		{
			title: '套餐二'
		},
		{
			title: '套餐一'
		},
		{
			title: '套餐二'
		}
	])

	const showAll = ref(false)
	const toggleButtonText = ref('展开全部')

	// 计算属性
	const visibleItems = computed(() => {
		if (showAll.value) {
			return list;
		} else {
			return list.value.slice(0, 2);
		}
	});

	// 方法
	function toggleList() {
		showAll.value = !showAll.value;
		toggleButtonText.value = showAll.value ? '收起' : '展开全部';
	}
</script>

<style scoped lang="less">
	.container {
		padding: 20rpx 24rpx 0 24rpx;
		height: 100vh;
		background-color: #f2f2f2;
	}

	.container .order-bewtten {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.container .order-bewtten .dh-value {
		font-weight: 500;
		font-size: 28rpx;
		color: #212121;
	}

	.container .order-bewtten .status-zq {
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
	}

	.container .product-continar {
		padding: 10rpx 24rpx 35rpx 24rpx;
		margin-top: 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.container .product-continar .pro-item {
		margin-top: 40rpx;
	}

	.container .product-continar .pro-item .logo {
		width: 160rpx;
		height: 160rpx;
	}

	.container .product-continar .pro-item .rg-content {
		flex: 1;
		margin-left: 22rpx;
	}

	.container .product-continar .pro-item .rg-content .tab-bq {
		width: 80rpx;
		height: 36rpx;
		border-radius: 4rpx;
		text-align: center;
		line-height: 36rpx;
	}

	.container .product-continar .pro-item .rg-content .tab-bq-yellow {
		background: #FFF6E5;
		color: #FFAA00;
	}

	.container .product-continar .pro-item .rg-content .tab-bq-green {
		background: #E5FFF6;
		color: #2BD99F;
	}

	.container .product-continar .pro-item .rg-content .po-title {
		margin-left: 11rpx;
	}

	.container .product-continar .pro-item .rg-content .pro-info {
		margin-top: 20rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		margin-left: 12rpx;
	}

	.container .product-continar .pro-item .rg-content .pro-price {
		font-weight: 500;
		font-size: 36rpx;
		color: #212121;
	}

	.container .product-continar .pro-item .rg-content .pro-no-price {
		margin-left: 12rpx;
		padding-top: 20rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #666666;
	}

	.container .product-continar .pro-item .rg-content .pro-count {
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
	}

	.container .product-continar .pro-item .rg-content .pro-count-bewtten {
		display: flex;
		justify-content: space-between;
	}

	.zk-center-flex {
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.zk-center-flex .zk-title {
		font-weight: 500;
		font-size: 26rpx;
		color: #FF6A00;
	}

	.zk-center-flex .zk-icon {
		width: 24rpx;
		height: 15rpx;
		margin-left: 12rpx;
	}

	.xd-continar {
		margin-top: 20rpx;
		padding-bottom: 40rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.xd-continar .xd-conti-pd {
		padding: 8rpx 21rpx 0 24rpx;
	}

	.xd-continar .xd-bewtten {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.xd-continar .xd-bewtten .label {
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
	}

	.xd-continar .xd-bewtten .value {
		font-weight: 500;
		font-size: 28rpx;
		color: #212121;
	}

	.xd-continar .rg-end-flebtb {
		display: flex;
		padding-right: 24rpx;
	}

	.xd-continar .rg-end-flebtb .yh-value {
		color: #666666 !important;
		font-size: 24rpx;
	}

	.address {
		height: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		line-height: 40rpx;
	}

	.bot-price-infobox {
		// width: 100%;
		font-size: 24rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		height: 40rpx;
		line-height: 40rpx;
		align-items: flex-end;
		margin-right: 20rpx;
		margin-top: 40rpx;
	}
</style>